<template>
	<view class="bg-white radius margin-top margin-bottom-sm margin-left margin-right">
		<view @tap="clickAction" class="flex justify-between align-center padding">
			<view class="flex justify-start align-center">
				<view class="padding-right">
					<image class="radius" :src="userInfo.avatar" style="width: 100upx;height: 100upx;">
					</image>
				</view>
				<view class="flex justify-start align-start" style="flex-direction: column;">
					<view class="flex justify-start align-center">
						<text class="text-bold text-lg padding-right-xs">{{userInfo.nickname}}</text>
						<image v-if="userInfo.sex!==-1" class="sex-icon"
							:src="'../static/images/setting/'+[userInfo.sex==0?'female':'male']+'.png'"></image>
						<view v-if="userInfo.sex!==-1" class="padding-right-xs"></view>
						<view v-if="userInfo.group"
							:class="'radius cu-tag sm bg-'+[userInfo.group.open_choose==1?'gray text-grey':'blue']">
							{{userInfo.group.name}}
						</view>
						<view v-if="showCircleOwner" class="cu-tag sm bg-cyan radius">圈主</view>
						<view v-if="userInfo.role!==null&&showCircleOwner==false" class="padding-left-xs">
							<view style="max-width: 65upx;" :class="'radius cu-tag sm bg-'+roleColor">
								{{userInfo.role.name}}
							</view>
						</view>
					</view>
					<view class="flex justify-start align-center padding-top-sm">
						<text class="text-grey padding-right">{{userInfo.area}} - {{userInfo.country}}</text>
						<text class="text-gray">{{format(userInfo.active_count)}}动态</text>
						<text v-if="showPostCount" class="text-gray"> . {{format(userInfo.post_count)}}帖子</text>
						<text v-if="showFansCount" class="text-gray"> . {{format(userInfo.fans_count)}}粉丝</text>
					</view>
				</view>
			</view>
			<checkbox v-if="chooseMode==true" @tap.stop="changeStatus" class='round blue'
				:class="userInfo.checked?'checked':''" :checked="userInfo.checked?true:false"></checkbox>
			<text v-else class="cuIcon-right text-grey"></text>
		</view>
	</view>
</template>

<script>
	import {
		formatCount,
		getTagColorForRole
	} from '@/api/utils.js'
	export default {
		name: "ListUserItem",
		data() {
			return {

			};
		},
		props: {
			userInfo: {
				type: Object,
				default: {}
			},
			chooseMode: {
				type: Boolean,
				default: false
			},
			showCircleOwner: {
				type: Boolean,
				default: false
			},
			showFansCount:{
				type: Boolean,
				default: true
			},
			showPostCount:{
				type: Boolean,
				default: false
			},
		},
		computed: {
			roleColor() {
				if (this.userInfo == null ||
					this.userInfo.role == null) {
					return 'white'
				}
				return getTagColorForRole(this.userInfo.role.role_id)
			}
		},
		methods: {
			format(count) 
			{
				return formatCount(count)
			},
			clickAction() {
				uni.navigateTo({
					url:'/pages/profile/profile?userId='+this.userInfo.user_id
				})
			},
			changeStatus() {
				this.$emit('changeStatus')
			}
		},
	}
</script>

<style lang="scss">
	.sex-icon {
		width: 25upx;
		height: 25upx;
	}
</style>
